<template>
  <div class="form-designer">
    <div class="left" :class="showLeft ? 'active' : ''">
      <!-- 表单项列表 -->
      <ToolMenus v-if="showLeft" />
      <div class="control-btn" @click="showLeft = !showLeft">
        <i class="icon iconfont">&#xe60b;</i>
      </div>
    </div>
    <div class="middle">
      <!-- 表单视图 Table || mobile || print -->
      <EditView />
    </div>
    <div v-if="showRight" class="right" :class="showRight ? 'active' : ''">
      <i @click="showRight = !showRight" class="close-btn icon iconfont">&#xe658;</i>
      <!-- 表单项属性 -->
      <ToolAttrs />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUUID } from '@/assets/utils'
import { create2DArray } from '@/components/VTable/utils'
import * as toolUtils from './tools/utils'
import type { VTableForm } from '@/components/VTable/types'
import type { FormItem, FormItemConfig } from './types'
const emits = defineEmits(['update'])
const showLeft = ref(true)
const showRight = ref(false)
const tableForm = ref<VTableForm>({
  id: '',
  tables: [],
  forms: [],
  tableAttr: {
    title: '',
    bgColor: '',
    borderColor: ''
  }
})
// 表格单元格列表
const tables = computed(() => tableForm.value?.tables)
// 表格属性
const tableAttr = computed(() => tableForm.value?.tableAttr)
// 当前单元格id
const currentTdId = ref<string>('')
// 表单项列表
const forms = computed(() => tableForm.value?.forms)
// 表格数据及操作方法
provide('tables', {
  tables,
  tableAttr,
  currentTdId,
  // 设置当前单元格
  setCurrent: (tdId: string) => {
    currentTdId.value = tdId
    const isUse = forms.value.find((el) => el.tdId === tdId)
    showRight.value = isUse ? true : false
  },
  // 更新表格结构
  updateTables: (tables: any): void => {
    tableForm.value.tables = tables
    emits('update', tableForm.value)
  },
  // 设置表格属性
  setTableAttr: (data: any) => {
    tableForm.value.tableAttr = data
    emits('update', tableForm.value)
  }
})
// 表单数据及操作方法
provide('forms', {
  forms,
  // 向表格中添加表单项
  addFormItem: (
    tdId: string,
    formType: string,
    formTypeName: string,
    formTypeIcon: string
  ): void => {
    const obj: FormItem = {
      id: 'input-' + getUUID(),
      tdId,
      formType,
      formTypeName,
      formTypeIcon,
      config: {}
    }
    // 获取表单项默认配置
    const config: FormItemConfig = toolUtils.initFormConfig(obj)
    obj.config = config
    currentTdId.value = tdId
    showRight.value = true
    tableForm.value.forms.push(obj)
    emits('update', tableForm.value)
  },
  // 更新表单项配置
  updateFormItem: (id: string, data: any): void => {
    const index = tableForm.value.forms.findIndex((form: any) => form.id === id)
    if (index > -1) {
      tableForm.value.forms[index].config = JSON.parse(JSON.stringify(data))
    }
    emits('update', tableForm.value)
  },
  // 删除表单项
  removeFormItem: (tdId: string): void => {
    tableForm.value.forms = tableForm.value.forms.filter((form: any) => form.tdId != tdId)
    showRight.value = false
    emits('update', tableForm.value)
  },
  // 更新表单列表
  updateForm: (data: any) => {
    tableForm.value.forms = data
    emits('update', tableForm.value)
  }
})
defineExpose({
  // 新建
  init(data?: any) {
    if (data) {
      tableForm.value = JSON.parse(JSON.stringify(data))
    } else {
      const row = 4
      const col = 4
      tableForm.value = {
        id: 'table-' + getUUID(),
        forms: [],
        tables: create2DArray(row, col, {
          w: 1,
          h: 1
        }),
        tableAttr: {
          title: '表格名称',
          bgColor: '#ffffff',
          borderColor: '#eeeeee'
        }
      }
    }
    return tableForm.value
  }
})
</script>

<script lang="ts">
export default {
  name: 'VFormDesigner'
}
</script>

<style lang="scss">
.form-designer {
  width: 100%;
  height: 100%;
  display: flex;
  .tool-attrs,
  .tool-menus {
    flex-shrink: 0;
    height: calc(100% - 40px);
    .title {
      font-size: 18px;
      line-height: 40px;
      margin-top: 20px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000000;
      .icon {
        font-size: 24px;
        margin-right: 5px;
      }
    }
    .tool-list {
      height: calc(100% - 75px);
      padding: 0 10px;
      .tool-item {
        display: inline-flex;
        align-items: center;
        margin: 5px;
        width: 129px;
        padding: 5px 15px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        font-size: 14px;
        line-height: 20px;
        color: #666666;
        cursor: move;
        .icon {
          font-size: 14px;
          margin-right: 5px;
        }
        &:hover {
          background-color: #fafafa;
        }
      }
    }
  }
  .control-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    width: 15px;
    padding: 2px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      font-size: 9px;
      flex-shrink: 0;
    }
    cursor: pointer;
    &:hover {
      background-color: #fafafa;
    }
  }
  .left {
    width: 0;
    flex-shrink: 0;
    border-right: 1px solid #eeeeee;
    background-color: #ffffff;
    position: relative;
    &.active {
      width: 300px;
      .control-btn {
        transform: rotate(0deg);
      }
    }
    .control-btn {
      right: -15px;
      border-radius: 0 4px 4px 0;
      transform: rotate(180deg);
      z-index: 1;
    }
  }
  .middle {
    flex: 1;
    min-width: calc(100% - 600px);
    height: 100%;
  }
  .right {
    width: 0;
    flex-shrink: 0;
    border-left: 1px solid #eeeeee;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    &.active {
      width: 300px;
    }
    .close-btn {
      position: absolute;
      transform: rotate(45deg);
      top: 15px;
      right: 15px;
      z-index: 1;
      cursor: pointer;
    }
  }
}
.form-designer-tips {
  display: flex;
  align-items: center;
  color: #666666;
  line-height: 1;
  margin: 5px;
  font-size: 12px;
  i {
    line-height: 1;
    margin-right: 5px;
  }
}
</style>
